<!DOCTYPE html>



  


<html class="theme-next muse use-motion" lang>
<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
















  
  
  <link href="/blog/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">







<link href="/blog/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">

<link href="/blog/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">


  <link rel="apple-touch-icon" sizes="180x180" href="/blog/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/blog/images/favicon-32x32-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/blog/images/favicon-16x16-next.png?v=5.1.4">


  <link rel="mask-icon" href="/blog/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="vue,">





  <link rel="alternate" href="/blog/atom.xml" title="编程那点事" type="application/atom+xml">






<meta name="description" content="基本用法要让 TypeScript 正确推断 Vue 组件选项中的类型，您需要使用 Vue.component 或 Vue.extend 定义组件： Vue.extend的用法跟javasrcipt里面区别不大，所以这里不做过多的说明。Vue.extend用法如下： 123456789101112// src/components/HelloWorld.vue&amp;lt;script lang=&quot;ts">
<meta name="keywords" content="vue">
<meta property="og:type" content="article">
<meta property="og:title" content="Vue-with-Typescript 系列(二) --基础篇">
<meta property="og:url" content="https://lhweb.gitee.io/blog/2018/09/25/Vue-with-Typescript 系列(二) --基础篇/index.html">
<meta property="og:site_name" content="编程那点事">
<meta property="og:description" content="基本用法要让 TypeScript 正确推断 Vue 组件选项中的类型，您需要使用 Vue.component 或 Vue.extend 定义组件： Vue.extend的用法跟javasrcipt里面区别不大，所以这里不做过多的说明。Vue.extend用法如下： 123456789101112// src/components/HelloWorld.vue&amp;lt;script lang=&quot;ts">
<meta property="og:locale" content="default">
<meta property="og:updated_time" content="2019-10-03T05:53:45.930Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Vue-with-Typescript 系列(二) --基础篇">
<meta name="twitter:description" content="基本用法要让 TypeScript 正确推断 Vue 组件选项中的类型，您需要使用 Vue.component 或 Vue.extend 定义组件： Vue.extend的用法跟javasrcipt里面区别不大，所以这里不做过多的说明。Vue.extend用法如下： 123456789101112// src/components/HelloWorld.vue&amp;lt;script lang=&quot;ts">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/blog/',
    scheme: 'Muse',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: 'Author'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://lhweb.gitee.io/blog/2018/09/25/Vue-with-Typescript 系列(二) --基础篇/">





  <title>Vue-with-Typescript 系列(二) --基础篇 | 编程那点事</title>
  








</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="default">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/blog/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">编程那点事</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle"></p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/blog/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br>
            
            Home
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/blog/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br>
            
            Archives
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://lhweb.gitee.io/blog/blog/2018/09/25/Vue-with-Typescript 系列(二) --基础篇/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="lhweb">
      <meta itemprop="description" content>
      <meta itemprop="image" content="/blog/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="编程那点事">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">Vue-with-Typescript 系列(二) --基础篇</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">Posted on</span>
              
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2018-09-25T21:48:43+08:00">
                2018-09-25
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">In</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/blog/categories/typescript/" itemprop="url" rel="index">
                    <span itemprop="name">typescript</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <h1 id="基本用法"><a href="#基本用法" class="headerlink" title="基本用法"></a>基本用法</h1><p>要让 TypeScript 正确推断 Vue 组件选项中的类型，您需要使用 Vue.component 或 Vue.extend 定义组件：</p>
<p>Vue.extend的用法跟javasrcipt里面区别不大，所以这里不做过多的说明。Vue.extend用法如下：</p>
<figure class="highlight xquery"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">// src/components/HelloWorld.vue</span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">lang</span>=<span class="string">"ts"</span>&gt;</span></span></span><br><span class="line"><span class="xml">import Vue from 'vue'</span></span><br><span class="line"><span class="xml">export default Vue.extend(</span><span class="xquery">&#123;</span></span><br><span class="line"><span class="xquery"> <span class="built_in"> name</span>: <span class="string">'HelloWorld'</span>,</span></span><br><span class="line"><span class="xquery">  data () &#123;</span></span><br><span class="line"><span class="xquery">    <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="xquery">      msg: <span class="string">'Welcome to Your Vue.js App'</span></span></span><br><span class="line"><span class="xquery">    &#125;</span><span class="xml"></span></span><br><span class="line"><span class="xml">  &#125;</span></span><br><span class="line"><span class="xml">&#125;)</span></span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure>
<p>Vue.component的用法需要用到第三方插件库，Vue-Class-Component或Vue-Property-Decorator</p>
<h1 id="第三方插件库"><a href="#第三方插件库" class="headerlink" title="第三方插件库"></a>第三方插件库</h1><h2 id="Vue-Class-Component"><a href="#Vue-Class-Component" class="headerlink" title="Vue-Class-Component"></a>Vue-Class-Component</h2><p>vue-class-component是官方维护的TypeScript装饰器，写法比较扁平化。Vue对其做到完美兼容，如果你在声明组件时更喜欢基于类的 API，这个库一定不要错过</p>
<p>ps：用了这个装饰器之后写方法不需要额外加逗号，贼嗨~~~</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">"vue"</span>;</span><br><span class="line"><span class="keyword">import</span> Component <span class="keyword">from</span> <span class="string">"vue-class-component"</span>;</span><br><span class="line"></span><br><span class="line">@Component</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">App</span> <span class="keyword">extends</span> <span class="title">Vue</span> </span>&#123;</span><br><span class="line">  name:string = <span class="string">'Simon Zhang'</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">// computed</span></span><br><span class="line">  <span class="keyword">get</span> MyName():string &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">`My name is <span class="subst">$&#123;<span class="keyword">this</span>.name&#125;</span>`</span></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// methods</span></span><br><span class="line">  sayHello():<span class="keyword">void</span> &#123;</span><br><span class="line">    alert(<span class="string">`Hello <span class="subst">$&#123;<span class="keyword">this</span>.name&#125;</span>`</span>)</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  mounted() &#123;</span><br><span class="line">    <span class="keyword">this</span>.sayHello();</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>这个代码如果用原生Vue语法来写的话就是这样：</p>
<figure class="highlight kotlin"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">export <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="keyword">data</span> () &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      name: <span class="string">'Simon Zhang'</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  mounted () &#123;</span><br><span class="line">    <span class="keyword">this</span>.sayHello()</span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  computed: &#123;</span><br><span class="line">    MyName() &#123;</span><br><span class="line">      <span class="keyword">return</span> `My name <span class="keyword">is</span> $&#123;<span class="keyword">this</span>.name&#125;`</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  methods: &#123;</span><br><span class="line">    sayHello() &#123;</span><br><span class="line">      alert(`Hello $&#123;<span class="keyword">this</span>.name&#125;`)</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="props、computed、method、data"><a href="#props、computed、method、data" class="headerlink" title="props、computed、method、data"></a>props、computed、method、data</h3><figure class="highlight django"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span></span><br><span class="line"><span class="xml">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">v-model</span>=<span class="string">"msg"</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>prop: </span><span class="template-variable">&#123;&#123;propMessage&#125;&#125;</span><span class="xml"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>msg: </span><span class="template-variable">&#123;&#123;msg&#125;&#125;</span><span class="xml"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>helloMsg: </span><span class="template-variable">&#123;&#123;helloMsg&#125;&#125;</span><span class="xml"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>computed msg: </span><span class="template-variable">&#123;&#123;computedMsg&#125;&#125;</span><span class="xml"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"greet"</span>&gt;</span>Greet<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span></span><br><span class="line"><span class="xml"></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="xml">import Vue from 'vue'</span></span><br><span class="line"><span class="xml">import Component from 'vue-class-component'</span></span><br><span class="line"><span class="xml"></span></span><br><span class="line"><span class="xml">@Component(&#123;</span></span><br><span class="line"><span class="xml">  props: &#123;</span></span><br><span class="line"><span class="xml">    propMessage: String</span></span><br><span class="line"><span class="xml">  &#125;</span></span><br><span class="line"><span class="xml">&#125;)</span></span><br><span class="line"><span class="xml">export default class App extends Vue &#123;</span></span><br><span class="line"><span class="xml">  // initial data</span></span><br><span class="line"><span class="xml">  msg = 123</span></span><br><span class="line"><span class="xml"></span></span><br><span class="line"><span class="xml">  // use prop values for initial data</span></span><br><span class="line"><span class="xml">  helloMsg = 'Hello, ' + this.propMessage</span></span><br><span class="line"><span class="xml"></span></span><br><span class="line"><span class="xml">  // lifecycle hook</span></span><br><span class="line"><span class="xml">  mounted () &#123;</span></span><br><span class="line"><span class="xml">    this.greet()</span></span><br><span class="line"><span class="xml">  &#125;</span></span><br><span class="line"><span class="xml"></span></span><br><span class="line"><span class="xml">  // computed</span></span><br><span class="line"><span class="xml">  get computedMsg () &#123;</span></span><br><span class="line"><span class="xml">    return 'computed ' + this.msg</span></span><br><span class="line"><span class="xml">  &#125;</span></span><br><span class="line"><span class="xml"></span></span><br><span class="line"><span class="xml">  // method</span></span><br><span class="line"><span class="xml">  greet () &#123;</span></span><br><span class="line"><span class="xml">    alert('greeting: ' + this.msg)</span></span><br><span class="line"><span class="xml">  &#125;</span></span><br><span class="line"><span class="xml">&#125;</span></span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure>
<p>相当于：<br><figure class="highlight django"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span></span><br><span class="line"><span class="xml">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">v-model</span>=<span class="string">"msg"</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>prop: </span><span class="template-variable">&#123;&#123;propMessage&#125;&#125;</span><span class="xml"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>msg: </span><span class="template-variable">&#123;&#123;msg&#125;&#125;</span><span class="xml"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>helloMsg: </span><span class="template-variable">&#123;&#123;helloMsg&#125;&#125;</span><span class="xml"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>computed msg: </span><span class="template-variable">&#123;&#123;computedMsg&#125;&#125;</span><span class="xml"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"greet"</span>&gt;</span>Greet<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span></span><br><span class="line"><span class="xml"></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="xml">export default &#123;</span></span><br><span class="line"><span class="xml">  name:'App',</span></span><br><span class="line"><span class="xml">  data() &#123;</span></span><br><span class="line"><span class="xml">    return &#123;</span></span><br><span class="line"><span class="xml">      msg: 123,</span></span><br><span class="line"><span class="xml">      helloMsg:'Hello, ' + this.propMessage</span></span><br><span class="line"><span class="xml">    &#125;</span></span><br><span class="line"><span class="xml">  &#125;,</span></span><br><span class="line"><span class="xml">  props: &#123;</span></span><br><span class="line"><span class="xml">    propMessage:String,</span></span><br><span class="line"><span class="xml">  &#125;,</span></span><br><span class="line"><span class="xml">  </span></span><br><span class="line"><span class="xml">  computed:&#123;</span></span><br><span class="line"><span class="xml">      computedMsg:&#123;</span></span><br><span class="line"><span class="xml">         return 'computed ' + this.msg</span></span><br><span class="line"><span class="xml">      &#125;</span></span><br><span class="line"><span class="xml">  &#125;,</span></span><br><span class="line"><span class="xml">  methods: &#123;</span></span><br><span class="line"><span class="xml">   this.greet()</span></span><br><span class="line"><span class="xml"></span></span><br><span class="line"><span class="xml">  &#125;</span></span><br><span class="line"><span class="xml">&#125;</span></span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure></p>
<h3 id="Mixins"><a href="#Mixins" class="headerlink" title="Mixins"></a>Mixins</h3><p>声明mixin的例子：<br><figure class="highlight scala"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// mixin.js</span></span><br><span class="line"><span class="keyword">import</span> <span class="type">Vue</span> from <span class="symbol">'vu</span>e'</span><br><span class="line"><span class="keyword">import</span> <span class="type">Component</span> from <span class="symbol">'vue</span>-<span class="class"><span class="keyword">class</span><span class="title">-component</span>'</span></span><br><span class="line"><span class="class"></span></span><br><span class="line"><span class="class"><span class="title">//</span> <span class="title">You</span> <span class="title">can</span> <span class="title">declare</span> <span class="title">a</span> <span class="title">mixin</span> <span class="title">as</span> <span class="title">the</span> <span class="title">same</span> <span class="title">style</span> <span class="title">as</span> <span class="title">components</span>.</span></span><br><span class="line"><span class="class"><span class="title">@Component</span></span></span><br><span class="line"><span class="class"><span class="title">export</span> <span class="title">class</span> <span class="title">MyMixin</span> <span class="keyword">extends</span> <span class="title">Vue</span> </span>&#123;</span><br><span class="line">  mixinValue = <span class="symbol">'Hell</span>o'</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>使用mixin的例子：<br><figure class="highlight scala"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="type">Component</span>, &#123; mixins &#125; from <span class="symbol">'vue</span>-<span class="class"><span class="keyword">class</span><span class="title">-component</span>'</span></span><br><span class="line"><span class="class"><span class="title">import</span> <span class="title">MyMixin</span> <span class="title">from</span> '.<span class="title">/mixin</span>.<span class="title">js</span>'</span></span><br><span class="line"><span class="class"></span></span><br><span class="line"><span class="class"><span class="title">//</span> <span class="title">Use</span> `<span class="title">mixins</span>` <span class="title">helper</span> <span class="title">function</span> <span class="title">instead</span> <span class="title">of</span> `<span class="title">Vue</span>`.</span></span><br><span class="line"><span class="class"><span class="title">//</span> `<span class="title">mixins</span>` <span class="title">can</span> <span class="title">receive</span> <span class="title">any</span> <span class="title">number</span> <span class="title">of</span> <span class="title">arguments</span>.</span></span><br><span class="line"><span class="class"><span class="title">@Component</span></span></span><br><span class="line"><span class="class"><span class="title">export</span> <span class="title">class</span> <span class="title">MyComp</span> <span class="keyword">extends</span> <span class="title">mixins</span>(<span class="params"><span class="type">MyMixin</span></span>) </span>&#123;</span><br><span class="line">  created () &#123;</span><br><span class="line">    console.log(<span class="keyword">this</span>.mixinValue) <span class="comment">// -&gt; Hello</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<h2 id="Vue-Property-Decorator"><a href="#Vue-Property-Decorator" class="headerlink" title="Vue-Property-Decorator"></a>Vue-Property-Decorator</h2><p>vue-property-decorator 是在 vue-class-component 上增强了更多的结合 Vue 特性的装饰器，新增了这 7 个装饰器</p>
<ul>
<li>@Emit</li>
<li>@Provide</li>
<li>@Inject</li>
<li>@Model</li>
<li>@Prop</li>
<li>@Watch</li>
<li>@Component (从 vue-class-component 继承)</li>
</ul>
<p>下面对7个装饰器的用法做详细说明：</p>
<h3 id="Emit-event-string-装饰器"><a href="#Emit-event-string-装饰器" class="headerlink" title="@Emit(event?: string) 装饰器"></a>@Emit(event?: string) 装饰器</h3><figure class="highlight scala"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; <span class="type">Vue</span>, <span class="type">Component</span>, <span class="type">Emit</span> &#125; from <span class="symbol">'vue</span>-property-decorator'</span><br><span class="line"></span><br><span class="line"><span class="meta">@Component</span> <span class="comment">//每个组件必须要用@Component</span></span><br><span class="line">export <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">YourComponent</span> <span class="keyword">extends</span> <span class="title">Vue</span> </span>&#123;</span><br><span class="line">  count = <span class="number">0</span></span><br><span class="line"></span><br><span class="line">  <span class="meta">@Emit</span>()  <span class="comment">//this.$emit('add-to-count', n)</span></span><br><span class="line">  addToCount(n: number) &#123;</span><br><span class="line">    <span class="keyword">this</span>.count += n</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="meta">@Emit</span>(<span class="symbol">'rese</span>t') <span class="comment">//this.$emit('reset')</span></span><br><span class="line">  resetCount() &#123;</span><br><span class="line">    <span class="keyword">this</span>.count = <span class="number">0</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>相当于：</p>
<figure class="highlight kotlin"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">export <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="keyword">data</span>() &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      count: <span class="number">0</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    addToCount(n) &#123;</span><br><span class="line">      <span class="keyword">this</span>.count += n</span><br><span class="line">      <span class="keyword">this</span>.$emit(<span class="string">'add-to-count'</span>, n)</span><br><span class="line">    &#125;,</span><br><span class="line">    resetCount() &#123;</span><br><span class="line">      <span class="keyword">this</span>.count = <span class="number">0</span></span><br><span class="line">      <span class="keyword">this</span>.$emit(<span class="string">'reset'</span>)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>$emit的作用主要解决子组件向父组件通信问题。子组件可以使用 $emit 触发父组件的自定义事件。</p>
<blockquote>
<p>触发当前实例上的事件。附加参数都会传给监听器回调。</p>
</blockquote>
<h3 id="Provide-key-string-symbol-Inject-options-from-InjectKey-default-any-InjectKey-装饰器"><a href="#Provide-key-string-symbol-Inject-options-from-InjectKey-default-any-InjectKey-装饰器" class="headerlink" title="@Provide(key?: string | symbol) / @Inject(options?: { from?: InjectKey, default?: any } | InjectKey) 装饰器"></a>@Provide(key?: string | symbol) / @Inject(options?: { from?: InjectKey, default?: any } | InjectKey) 装饰器</h3><figure class="highlight scala"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; <span class="type">Component</span>, <span class="type">Inject</span>, <span class="type">Provide</span>, <span class="type">Vue</span> &#125; from <span class="symbol">'vue</span>-property-decorator'</span><br><span class="line"></span><br><span class="line">const symbol = <span class="type">Symbol</span>(<span class="symbol">'ba</span>z')</span><br><span class="line"></span><br><span class="line"><span class="meta">@Component</span></span><br><span class="line">export <span class="class"><span class="keyword">class</span> <span class="title">MyComponent</span> <span class="keyword">extends</span> <span class="title">Vue</span> </span>&#123;</span><br><span class="line">  <span class="meta">@Inject</span>() foo!: string </span><br><span class="line">  <span class="meta">@Inject</span>(<span class="symbol">'ba</span>r') bar!: string</span><br><span class="line">  <span class="meta">@Inject</span>(&#123; from: <span class="symbol">'optiona</span>l', <span class="keyword">default</span>: <span class="symbol">'defaul</span>t' &#125;) optional!: string</span><br><span class="line">  <span class="meta">@Inject</span>(symbol) baz!: string</span><br><span class="line"></span><br><span class="line"> <span class="comment">/*</span></span><br><span class="line"><span class="comment"> inject: &#123;</span></span><br><span class="line"><span class="comment">    foo: 'foo',</span></span><br><span class="line"><span class="comment">    bar: 'bar',</span></span><br><span class="line"><span class="comment">    'optional': &#123; from: 'optional', default: 'default' &#125;,</span></span><br><span class="line"><span class="comment">    [symbol]: symbol</span></span><br><span class="line"><span class="comment">  &#125;,</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"></span><br><span class="line">  <span class="meta">@Provide</span>() foo = <span class="symbol">'fo</span>o'</span><br><span class="line">  <span class="meta">@Provide</span>(<span class="symbol">'ba</span>r') baz = <span class="symbol">'ba</span>r'</span><br><span class="line"></span><br><span class="line"> <span class="comment">/*</span></span><br><span class="line"><span class="comment">  provide () &#123;</span></span><br><span class="line"><span class="comment">    return &#123;</span></span><br><span class="line"><span class="comment">      foo: this.foo,</span></span><br><span class="line"><span class="comment">      bar: this.baz</span></span><br><span class="line"><span class="comment">    &#125;</span></span><br><span class="line"><span class="comment">  &#125;</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>相当于：</p>
<figure class="highlight kotlin"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> symbol = Symbol(<span class="string">'baz'</span>)</span><br><span class="line"></span><br><span class="line">export <span class="keyword">const</span> MyComponent = Vue.extend(&#123;</span><br><span class="line"></span><br><span class="line">  inject: &#123;</span><br><span class="line">    foo: <span class="string">'foo'</span>,</span><br><span class="line">    bar: <span class="string">'bar'</span>,</span><br><span class="line">    <span class="string">'optional'</span>: &#123; from: <span class="string">'optional'</span>, <span class="keyword">default</span>: <span class="string">'default'</span> &#125;,</span><br><span class="line">    [symbol]: symbol</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="keyword">data</span> () &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      foo: <span class="string">'foo'</span>,</span><br><span class="line">      baz: <span class="string">'bar'</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  provide () &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      foo: <span class="keyword">this</span>.foo,</span><br><span class="line">      bar: <span class="keyword">this</span>.baz</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<blockquote>
<p>provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。</p>
</blockquote>
<p>这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。如果你熟悉 React，这与 React 的上下文特性很相似。</p>
<p>provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。</p>
<p>inject 选项应该是：</p>
<ul>
<li>一个字符串数组，或</li>
<li>一个对象，对象的 key 是本地的绑定名，value 是：<ul>
<li>在可用的注入内容中搜索用的 key (字符串或 Symbol)，或</li>
<li>一个对象，该对象的：<ul>
<li>from 属性是在可用的注入内容中搜索用的 key (字符串或 Symbol)</li>
<li>default 属性是降级情况下使用的 value</li>
</ul>
</li>
</ul>
</li>
</ul>
<blockquote>
<p>提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。</p>
</blockquote>
<h3 id="Model-event-string-options-PropOptions-Constructor-Constructor-装饰器"><a href="#Model-event-string-options-PropOptions-Constructor-Constructor-装饰器" class="headerlink" title="@Model(event?: string, options: (PropOptions | Constructor[] | Constructor) = {}) 装饰器"></a>@Model(event?: string, options: (PropOptions | Constructor[] | Constructor) = {}) 装饰器</h3><figure class="highlight scala"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; <span class="type">Vue</span>, <span class="type">Component</span>, <span class="type">Model</span> &#125; from <span class="symbol">'vue</span>-property-decorator'</span><br><span class="line"></span><br><span class="line"><span class="meta">@Component</span></span><br><span class="line">export <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">YourComponent</span> <span class="keyword">extends</span> <span class="title">Vue</span> </span>&#123;</span><br><span class="line">  <span class="meta">@Model</span>(<span class="symbol">'chang</span>e', &#123; <span class="class"><span class="keyword">type</span></span>: <span class="type">Boolean</span> &#125;) checked!: boolean</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>相当于：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">export</span> <span class="selector-tag">default</span> &#123;</span><br><span class="line">  <span class="attribute">model</span>: &#123;</span><br><span class="line">    prop: <span class="string">'checked'</span>,</span><br><span class="line">    event: <span class="string">'change'</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="selector-tag">props</span>: &#123;</span><br><span class="line">    <span class="attribute">checked</span>: &#123;</span><br><span class="line">      type: Boolean</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。</p>
<h3 id="Prop-options-PropOptions-Constructor-Constructor-装饰器"><a href="#Prop-options-PropOptions-Constructor-Constructor-装饰器" class="headerlink" title="@Prop(options: (PropOptions | Constructor[] | Constructor) = {}) 装饰器"></a>@Prop(options: (PropOptions | Constructor[] | Constructor) = {}) 装饰器</h3><figure class="highlight scala"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; <span class="type">Vue</span>, <span class="type">Component</span>, <span class="type">Prop</span> &#125; from <span class="symbol">'vue</span>-property-decorator'</span><br><span class="line"></span><br><span class="line"><span class="meta">@Component</span></span><br><span class="line">export <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">YourComponent</span> <span class="keyword">extends</span> <span class="title">Vue</span> </span>&#123;</span><br><span class="line">  <span class="meta">@Prop</span>(<span class="type">Number</span>) propA!: number</span><br><span class="line">  <span class="meta">@Prop</span>(&#123; <span class="keyword">default</span>: <span class="symbol">'default</span> value' &#125;) propB!: string</span><br><span class="line">  <span class="meta">@Prop</span>([<span class="type">String</span>, <span class="type">Boolean</span>]) propC: string | boolean</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>相当于：<br><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">export</span> <span class="selector-tag">default</span> &#123;</span><br><span class="line">  <span class="attribute">props</span>: &#123;</span><br><span class="line">    propA: &#123;</span><br><span class="line">      type: Number</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="selector-tag">propB</span>: &#123;</span><br><span class="line">      <span class="attribute">default</span>: <span class="string">'default value'</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="selector-tag">propC</span>: &#123;</span><br><span class="line">      <span class="attribute">type</span>: [String, Boolean]</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<blockquote>
<p>props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义校验和设置默认值。</p>
</blockquote>
<h1 id="总结："><a href="#总结：" class="headerlink" title="总结："></a>总结：</h1><p>Typescript基于Vue.component的实现，就需要引入第三方组件库 Vue-Property-Decorator或 Vue-Class-Component。Vue-Class-Component这个是官方维护，Vue-Property-Decorator基于Vue-Class-Component进行了增强是社区维护。</p>
<p>Typescript基于Vue.extend的实现，那么用法上不会有太大的改变。</p>

      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/blog/tags/vue/" rel="tag"># vue</a>
          
        </div>
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/blog/2018/09/25/Vue-with-Typescript 系列(一) --概述/" rel="next" title="Vue-with-Typescript 系列(一) --概述">
                <i class="fa fa-chevron-left"></i> Vue-with-Typescript 系列(一) --概述
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/blog/2018/09/26/JavaScript-构造器模式/" rel="prev" title="JavaScript 构造器模式">
                JavaScript 构造器模式 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            Table of Contents
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            Overview
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <p class="site-author-name" itemprop="name">lhweb</p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/blog/archives/">
              
                  <span class="site-state-item-count">39</span>
                  <span class="site-state-item-name">posts</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/blog/categories/index.html">
                  <span class="site-state-item-count">6</span>
                  <span class="site-state-item-name">categories</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-tags">
                <a href="/blog/tags/index.html">
                  <span class="site-state-item-count">25</span>
                  <span class="site-state-item-name">tags</span>
                </a>
              </div>
            

          </nav>

          
            <div class="feed-link motion-element">
              <a href="/blog/atom.xml" rel="alternate">
                <i class="fa fa-rss"></i>
                RSS
              </a>
            </div>
          

          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#基本用法"><span class="nav-number">1.</span> <span class="nav-text">基本用法</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#第三方插件库"><span class="nav-number">2.</span> <span class="nav-text">第三方插件库</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#Vue-Class-Component"><span class="nav-number">2.1.</span> <span class="nav-text">Vue-Class-Component</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#props、computed、method、data"><span class="nav-number">2.1.1.</span> <span class="nav-text">props、computed、method、data</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Mixins"><span class="nav-number">2.1.2.</span> <span class="nav-text">Mixins</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Vue-Property-Decorator"><span class="nav-number">2.2.</span> <span class="nav-text">Vue-Property-Decorator</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#Emit-event-string-装饰器"><span class="nav-number">2.2.1.</span> <span class="nav-text">@Emit(event?: string) 装饰器</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Provide-key-string-symbol-Inject-options-from-InjectKey-default-any-InjectKey-装饰器"><span class="nav-number">2.2.2.</span> <span class="nav-text">@Provide(key?: string | symbol) / @Inject(options?: { from?: InjectKey, default?: any } | InjectKey) 装饰器</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Model-event-string-options-PropOptions-Constructor-Constructor-装饰器"><span class="nav-number">2.2.3.</span> <span class="nav-text">@Model(event?: string, options: (PropOptions | Constructor[] | Constructor) = {}) 装饰器</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Prop-options-PropOptions-Constructor-Constructor-装饰器"><span class="nav-number">2.2.4.</span> <span class="nav-text">@Prop(options: (PropOptions | Constructor[] | Constructor) = {}) 装饰器</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#总结："><span class="nav-number">3.</span> <span class="nav-text">总结：</span></a></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; <span itemprop="copyrightYear">2019</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">lhweb</span>

  
</div>


  <div class="powered-by">Powered by <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a></div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">Theme &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Muse</a> v5.1.4</div>




        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  
    <script type="text/javascript" src="/blog/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/blog/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/blog/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/blog/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/blog/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/blog/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  


  


  <script type="text/javascript" src="/blog/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/blog/js/src/motion.js?v=5.1.4"></script>



  
  

  
  <script type="text/javascript" src="/blog/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/blog/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/blog/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  












  





  

  

  

  
  

  

  

  

</body>
</html>
